<template>
  <div class="coupon_div" :style="'background:' + data.bg_div_color">
    <div :class="'coupon-list ' + data.show_type">
      <div class="nocouponbg" v-if="data.list.length == 0">
        <img src="@/assets/images/couponbg.png" />
      </div>
      <div v-else class="item-list" v-for="(item, i) in data.list" :key="i">
        <div class="coupon-bg">
          <img
            src="@/assets/images/bg_coupon_index_4.png"
            alt=""
            style="height: 100%; width: 100%"
          />
        </div>
        <div
          class="flex"
          :style="
            'height: 100%;' +
            'color:' +
            data.textcolor +
            '; background:' +
            data.bgcolor
          "
        >
          <div style="text-align: center; width: 75%">
            <div class="price" style="height: 50%; font-size: 16px">
              ￥{{ item.denomination }}
            </div>
            <div class="price" style="height: 50%; font-size: 10px">
              满{{ item.conditions }}元可用
            </div>
          </div>
          <div class="btns" style="flex-grow: 1">
            <div class="right">立即领取</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    data: {
      type: Object,
      default: {},
    },
  },
  computed: {},
};
</script>

<style lang="scss" scoped>
.coupon_div {
  box-sizing: border-box;
  border-radius: 6px;
  overflow: hidden;
  .nocouponbg {
    width: 375px;
    img {
      width: 100%;
    }
  }
  .coupon-list {
    .item-list {
      background: rgb(217, 188, 139);
      width: 137px;
      color: rgb(255, 255, 255);
      margin-left: 10px;
      height: 70px;
      position: relative;
      .coupon-bg {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
      }
      .flex {
        display: flex;
        width: 100%;
        .price {
          justify-content: center;
          display: flex;
          align-items: center;
        }
      }
      .btns {
        display: flex;
        align-items: center;
      }
      .right {
        width: 1.6rem;
        font-size: 13px;
        line-height: 1.2;
        text-align: center;
        margin-right: 2px;
        writing-mode: vertical-rl;
      }
    }
    &.scroll {
      min-height: 100px;
      overflow-x: auto;
      display: flex;
      flex-direction: row;
      padding: 10px 12px 10px 2px;
      .flex {
        display: flex;
        width: 137px;
      }
    }
    &.block {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      padding: 10px 12px 10px 12px;
      .item-list {
        width: 170px;
        height: 86px;
        margin-left: 0px;
        margin-bottom: 10px;
      }
    }
    // .item-list {
    //   display: flex;
    //   flex-wrap: wrap;
    //   .item {
    //     width: 50%;
    //     display: flex;
    //     flex-direction: column;
    //     align-items: center;
    //     padding: 0 5px;
    //     margin-top: 10px;
    //     color: #fff;
    //     .coupon {
    //       position: relative;
    //       overflow: hidden;
    //       width: 100%;
    //       .name,
    //       .demon,
    //       .btn{
    //         position: relative;
    //         text-align: center;
    //       }
    //       .name{
    //             font-family: PingFang SC;
    //             font-style: normal;
    //             font-weight: bold;
    //             font-size: 24px;
    //             text-align: center;
    //             line-height: 24px;
    //             color: #A2731E;
    //             margin-top: 13px;
    //             margin-bottom: 0;
    //       }
    //       .demon{
    //             font-weight: normal;
    //             font-size: 12px;
    //             line-height: 12px;
    //             color: #A2731E;
    //             margin-top: 8px;
    //              margin-bottom: 0;
    //       }
    //       .btn{
    //             font-size: 14px;
    //             line-height: 12px;
    //             color: #442D01;
    //             margin-top: 24px;
    //       }
    //     }
    //   }
    // }

    // .bg1 {
    //   position: absolute;
    //   width: 100%;
    //   height: 100%;
    //   top: 0;
    //   left: 0;
    //   background: #ead3ac;
    //   border-radius: 2px;
    //   margin: 0;
    //   &::after {
    //       content: "";
    //       top: 66px;
    //       left: 6px;
    //       right: 6px;
    //       height: 0;
    //       border-bottom: 1px dashed rgba(255,255,255,0.87);
    //       position: absolute;
    //   }
    // }
  }
}
</style>
